<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="优惠卡消费二维码" size="large" />
    <div class="img_outer">
      <van-image width="240" height="240" :src="consume_image">
        <template v-slot:loading>
          <van-icon name="qr-invalid" size="5rem" />
        </template>
      </van-image>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import NavBar from "@/components/NavBar";
import { show_qrcode } from "@/api/wechat";

export default {
  name: "ClientConsumeQrCode",
  components: {
    NavBar,
  },
  computed: {},
  data() {
    return {
      title: this.$route.meta.title,

      consume_image: null,
    };
  },

  props: ["card_id"],

  mounted() {
    this.getQrCode();
  },

  methods: {
    getQrCode() {
      const count = this.$route.query.count;
      // const openid = this.$route.query.openid;
      const pid = localStorage.getItem("openid");
      const base64_pid = Base64.encode(pid);
      const url = `http://${window.location.host}/#/client/${this.card_id}/card_consume?count=${count}&pid=${base64_pid}`;
      const params = {
        url: url,
      };
      show_qrcode(params)
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.consume_image = data;
        });
    },
  },
};
</script>

<style scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.van-tag {
  line-height: 24px;
}
</style>